<template>
 <div id="main">
   <!-- 搜索组件 -->
 <van-search v-model="value" show-action :placeholder="defaultKeyword"  @search="onSearch" @cancel="onCancel" @input='Oninput' />
 <!-- 历史记录和热门搜索组件 -->
 <historyhot :historyKeywordList="historyKeywordList" :hotKeywordList="hotKeywordList" @getsearch="setvalue" v-if="isshow==1"></historyhot>
 <!-- 商品列表排序组件 -->
 <paixu :goodsList='goodsList' :filterCategory='filterCategory' @changefenlei="fenleichange" @changeprice="pricechange" v-if="isshow==2"></paixu>
 <!-- 搜索框提示组件 -->
 <searchHelp v-if="isshow==3" :searchTipsArr='searchTipsArr' @help='getvalue'></searchHelp>
 </div>
</template>

<script>
// 引入搜索框组件
import historyhot from '@/components/searchpage/history-hot.vue'
import paixu from "../../components/searchpage/paixu.vue"
import searchHelp from '@/components/searchpage/searchhelp.vue'
//   引入获取数据接口
 import {searchlist,searchhelp,getsearchdata} from '../../api/search.js'
 export default {
  name:'',
    data () {
       return {
         isshow:1,//展示组件的依据
         value:'',//展示点击搜索框内容，搜索列表
         defaultKeyword:"",//placehodel默认显示
         historyKeywordList:[],//历史记录
         hotKeywordList:[],//热门搜索
         order:"desc",//排序的顺序
         sort: "id",//可以是id也可以是price
         categoryId:0, //类别id，代表下拉菜单中的全部、居家等选项
         goodsList:[], //  搜索出来的商品列表
        filterCategory:[], //下拉菜单分类数据
        searchTipsArr: [] //搜索框输入空时的提示列表
     };
  },
created(){
   this.gethsdata()
},
components:{
  historyhot,
  paixu,
  searchHelp
},
methods: {
    // 搜索组件的方法
    onSearch() {
      // 修改参数格式
      let params={
        keyword: this.value,
        page: 1,
        size: 20,
        order: this.order, //价格排序
        categoryId: this.categoryId, //分类排序类别id
        sort: this.sort, //分类排序price或id
      }
      // 调用接口
      getsearchdata(params).then(res=>{
        console.log(res);
        if(res.errno==0){
          this.isshow=2 //让商品列表展示
          this.goodsList = res.data.goodsList //获取商品列表
          let cate = res.data.filterCategory; // 下拉菜单分类数组（全部，居家，。。。）
          cate = JSON.parse(
            JSON.stringify(cate)
              .replaceAll('id', "value")
              .replaceAll('name', "text")
          );
          this.filterCategory = cate; //获取下拉菜单分类数组
        }
      })
    },
    onCancel() {
      this.$router.push("/home")
    },
   //获取搜索框数据
    gethsdata(){
      searchlist().then(res=>{
        this.defaultKeyword = res.data.defaultKeyword.keyword;
        this.historyKeywordList = res.data.historyKeywordList; // 历史记录列表
        this.hotKeywordList = res.data.hotKeywordList; // 热门搜索
      })
    },
    //接受历史记录子组件传来的数据
    setvalue(val){
    this.value=val
    this.onSearch()
    },
    //根据点击分类菜单子组件传来的值重新渲染商品列表
    fenleichange(val){
      this.categoryId =val;
      this.sort = "id";
      this.onSearch();
    },
    pricechange(val){
      this.order=val
      this.sort = "price";
      this.onSearch();
    },
    // 搜索框输入时触发
    Oninput(val){
      // console.log(this.value);
      this.isshow=3
      searchhelp({ keyword: val}).then(res=>{
       this.searchTipsArr = res.data; 
      })
    },
    //接收搜索提示列表子组件传的数据
    getvalue(val){
      this.value=val
      this.onSearch()
    }
  },


 }

</script>
<style scoped>
#main{
  width: 375px;
  height: 667px;
  display: flex;
  flex-direction: column;
}
</style>